import React, { useState, useEffect, setState, useRef } from "react";
import axios from "axios";
import { message, Input, Button, Table, Tag, Modal, Form } from "antd";
import { useLocation } from "react-router";
import columns from "./colums";
import "../../index.css";
const Rooms = () => {
  const location = useLocation();
  const [roomInfo, setRoomInfo] = useState([]);
  useEffect(() => {
    requestRoomInfo();
  }, []);

  // 房间号下设备列表
  const requestRoomInfo = async () => {
    const res = await axios.get("http://127.0.0.1:4399/device/getRoomInfo", {
      params: {
        sync_id: location.state,
      },
    });
    console.log(res);
    if (!res.data.data) return;
    if (res.data.code == 200) {
      setRoomInfo(res.data.data);
    } else {
      message.info(res.data.code);
    }
  };

  return (
    <>
      <div className="header">
        <div style={{ height: 60, display: "flex", alignItems: "center" }}>
          <img
            style={{ height: 60, width: 60 }}
            src="/assets/img/logo.png"
            alt=""
          />
          <span style={{ color: "white", fontWeight: 800 }}>
            唯有进化才能使人类更进一步!
          </span>
        </div>
        <div>
          帮会号(房间ID)：
          <span>{roomInfo[0] ? roomInfo[0].sync_id : ""}</span>
        </div>
      </div>
      <div className="room_list">
        <span>房间设备信息</span>
        <Table
          columns={[
            ...columns,
            {
              title: "操作",
              key: "operator",
              render: (text, record) => <a>操作</a>,
            },
          ]}
          dataSource={roomInfo}
          style={{ marginTop: 10 }}
        />
      </div>
    </>
  );
};

export default Rooms;
